<template>
	<view class="content">
		<view :style="{height: systemBarHeight + 'px'}">
		</view>
		<view class="navbar">
			<uni-nav-bar @clickLeft="fh" :border="false" left-icon="left" title="经销商入驻申请" />
		</view>

		<view class="ipt">
			<view class="ipt_item">
				<view class="ipt_item1">
					*<text>公司名称</text>
				</view>
				<view class="ipt_item2">
					<input type="text" value="" placeholder="请输入公司名称" />
				</view>
			</view>
			<view class="ipt_item">
				<view class="ipt_item1">
					*<text>联系人</text>
				</view>
				<view class="ipt_item2">
					<input type="text" value="" placeholder="请输入联系人" />
				</view>
			</view>
			<view class="ipt_item">
				<view class="ipt_item1">
					*<text>联系方式</text>
				</view>
				<view class="ipt_item2">
					<input type="text" value="" placeholder="请输入联系方式" />
				</view>
			</view>
			<view class="ipt_item">
				<view class="ipt_item1">
					*<text>公司简介</text>
				</view>
				<view class="ipt_item2">
					<input type="text" value="" placeholder="请输入公司简介" />
				</view>
			</view>

			<view class="ipt_item_ll">
				<view class="ipt_item1">
					*<text>公司规模</text>
				</view>
				<view class="ipt_item2">

					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="ipt_item2_tit">{{array[index]}}</view>
					</picker>

				</view>
			</view>
		</view>
		<view class="tut">

		</view>
		<view class="certificate">

			<view class="certificate_tit">
				<text>证件图片</text>
			</view>
			<view class="certificate_upload">
				<view class="certificate_upload_item" v-if="rs==false" @click="updaters()">
					<view class="certificate_upload_item1">
						<image src="/static/mine/upload.png" mode=""></image>
					</view>
					<view class="certificate_upload_item2">
						<text>上传身份证人像面</text>
					</view>
				</view>
				<view class="certificate_upload_itemrs1" v-if="rs==true">
					<image :src="rsimagesrc" mode=""></image>
				</view>
				<view class="certificate_upload_item" v-if="gh==false" @click="updategh()">
					<view class="certificate_upload_item1">
						<image src="/static/mine/upload.png" mode=""></image>
					</view>
					<view class="certificate_upload_item2">
						<text>上传身份证国徽面</text>
					</view>
				</view>
				<view class="certificate_upload_itemrs1" v-if="gh==true">
					<image :src="ghimagesrc" mode=""></image>
				</view>
			</view>
		</view>
		<view class="tut">

		</view>
		<!-- 营业执照 -->
		<view class="certificate">
			<view class="certificate_tit">
				<text>营业执照图片</text>
			</view>
			<view class="certificate_upload">
				<view class="certificate_upload_item" v-if="yyzz==false" @click="updateyyzz()">
					<view class="certificate_upload_item1">
						<image src="/static/mine/upload.png" mode=""></image>
					</view>
					<view class="certificate_upload_item2">
						<text>上传营业执照</text>
					</view>
				</view>

				<view class="certificate_upload_itemrs1" v-if="yyzz==true">
					<image :src="yyzzimmagesrc" mode=""></image>
				</view>
			</view>
		</view>

		<view class="confirm">
			<button type="default">提交</button>
		</view>

		<!-- 	<view class="confirm1">
			<button type="default">提交</button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				rs: false,
				gh: false,
				yyzz: false,
				yyzzimmagesrc: '',
				rsimagesrc: '',
				ghimagesrc: '',
				systemBarHeight: 0,
				array: ['20以下', '20-50', '50-100', '100-500', '500以上'],
			}
		},
		mounted() {
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			fh() {
				uni.navigateBack({
					delta: 1 // 返回的页面层级，1表示返回上一页
				});
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			/* 上传人身 */
			updaters() {
				let that = this
				uni.chooseImage({
					count: 1, //上传图片的数量，默认是9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.rs = true
						console.log(res)
						console.log(that.rs)
						that.rsimagesrc = res.tempFilePaths
					}
				});

			},
			/* 上传国徽 */
			updategh() {
				let that = this
				uni.chooseImage({
					count: 1, //上传图片的数量，默认是9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.gh = true
						console.log(res)

						that.ghimagesrc = res.tempFilePaths
					}
				});
			},

			updateyyzz() {
				let that = this
				uni.chooseImage({
					count: 1, //上传图片的数量，默认是9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.yyzz = true
						console.log(res)
						console.log(that.yyzz)
						that.yyzzimmagesrc = res.tempFilePaths
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 150rpx;
	}

	.ipt {
		.ipt_item {
			width: 88%;
			margin: 30rpx auto 0;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			padding-bottom: 30rpx;
			display: flex;
			align-items: center;

			.ipt_item1 {
				width: 30%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 31rpx;
				color: #FF4500;
				display: flex;
				align-items: center;

				>text {

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 31rpx;
					color: #7D8CA4;

				}

				.ipt_item2 {}
			}

		}

		.ipt_item_ll {
			width: 88%;
			margin: 30rpx auto 0;

			padding-bottom: 30rpx;
			display: flex;
			align-items: center;

			.ipt_item1 {
				width: 30%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 31rpx;
				color: #FF4500;
				display: flex;
				align-items: center;

				>text {

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 31rpx;
					color: #7D8CA4;

				}

				.ipt_item2 {
					.ipt_item2_tit {

						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 31rpx;
						color: #CCCCCC;

					}
				}
			}

		}
	}

	.ipt_item2_tit {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 31rpx;
		color: #CCCCCC;
	}

	.certificate_upload_itemrs1 {
		width: 332rpx;
		height: 275rpx;
		background: #EBF5FF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;

		>image {
			width: 332rpx;
			height: 275rpx;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
		}
	}	

	.ipt_item2 input /deep/ .input-placeholder {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 31rpx;
		color: #CCCCCC;
	}

	.tut {
		width: 750rpx;
		height: 15rpx;
		background: #F4F6F9;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.certificate {
		.certificate_tit {
			width: 91%;
			margin: auto;
			padding-top: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #152034;
		}

		.certificate_upload {
			width: 91%;
			margin: 30rpx auto 0;
			display: flex;
			justify-content: space-between;
			padding-bottom: 30rpx;

			.certificate_upload_itemrs1 {
				width: 332rpx;
				height: 275rpx;
				background: #EBF5FF;
				border-radius: 15rpx 15rpx 15rpx 15rpx;

				>image {
					width: 332rpx;
					height: 275rpx;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
				}
			}

			.certificate_upload_item {
				width: 332rpx;
				height: 275rpx;
				background: #EBF5FF;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				background-image: url("");
				background-repeat: no-repeat;
				background-size: 332.06rpx 274.81rpx;

				.certificate_upload_item1 {
					padding-top: 38.23rpx;
					height: 141.22rpx;
					width: 240.46rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: auto;

					>image {
						width: 68.7rpx;
						height: 68.7rpx;
					}
				}

				.certificate_upload_item2 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 27rpx;
					color: #7D8CA4;
					margin: 15rpx auto 0;
					display: flex;
					justify-content: center;
				}
			}
		}

	}

	.confirm {
		margin-top: 90rpx;
	}

	.confirm button {
		width: 626rpx;
		height: 95rpx;
		background: #1677FF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 34rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.confirm1 {
		margin-top: 90rpx;
	}

	.confirm1 button {
		width: 626rpx;
		height: 95rpx;
		background: #B2DCFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 34rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>